<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/11/7
  Time: 13:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/mb/jsp/common.jsp" %>
<%@ page import="com.limao.servlet.WebFunction" %>
<%@ page import="com.limao.DBDataClass.CrowdUserAuthClass" %>
<%@ page import="com.limao.Tool.Arith" %>

<%
    String userid=CacheClass.isLogin(request,response);
    if (CacheClass.getIntValue(userid) == 0) {
        out.println("<script language='JavaScript'>showToast('您还没有登陆！');location.href=document.referrer;</script>"); //后退并刷新
        return;
    }
    CrowdUserAuthClass user = WebFunction.getUserInfo(request, response);
    if (user == null) {
        out.println("<script language='JavaScript'>showToast('用户不存在，或被平台禁用，请联系客服！');window.history.back(-1);</script>");
        return;
    }
    
    String rank = "未知";
    if (!TextUtils.isEmpty(user.rank)) {
        rank = user.rank;
    }
    

 int sysTest=WebFunction.getSysTest();
 int userTest=1;
 int flagTest=1;
 if(sysTest==0)
 {
 	flagTest=0;
 }
 else
 {
		 userTest=CacheClass.getIntValue(user.userTest);
		 if(userTest==1)
		 {
		 	flagTest=1;
		 }
		 else
		 {
		 	flagTest=0;
		 }

 
 }
 

 

%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>

    <script src="mb/js/iscroll-zoom.js"></script>
    <script src="mb/js/hammer.js"></script>
    <script src="mb/js/lrz.all.bundle.js"></script>
    <script src="mb/js/jquery.photoClip.js"></script>

</head>
<body ontouchstart="">
<div class="detailTop pf w100 of">
    <div class="w100 of tc cf f18">
        <span class="pa" style="left: 2px;" onclick="javascript:history.back();"><img src="mb/images/top_back_white.png"
                                                                                      style="margin-top: 4px;height: 40px;width: 40px;"/></span>
		 个人资料
    </div>
</div>
<div class="container jz" style="margin-top: 34px;">
    <section class="personalAllInfo w100 pr withdrawBack" style="height:200px">
        <a class="db clearfix of">
            <img src="<%=getImageBasePath(user.avatar)%>" id="userimg" class="db jz">
            <button type="button" class="ghtouxiang db tc f16 cf lh2 jz br2 mgt10" id="ghtouxiang" onclick="return false;">点击更换头像
            </button>
            <!--<input  type="button" name="" value="点击更换头像" class="ghtouxiang db tc f16 c6 fl" id="ghtouxiang" onclick="return false;";/>-->
        </a>
         <div class="pa w100" style="bottom:-40px;left:0;width:100%;">
        	<div class="w92 jz of bcf br4">
        		<div class="flexBox"  style="padding:16px;">
        			<div  class="df">
        				<p class='c3 f15'>经销商等级</p>
        				<div class="pr mgl10">
	                		 <img src="mb/images/vipShow.png" class="db" style="height: 20px;">
	                		 <span class="f13 cf pa" style="right: 6px;top: 1px;"><%=user.viplevel%></span>
	                	</div>
        			</div>
        			<%if (user.vipdateStr != null){%>
	                	<p class='c3 f14'><%=user.vipdateStr%></p>
                	<%}%>
        		</div>
        	</div>
       </div>
    </section>

    <section class="personalAllMoney w100 bcf of withDrawForm" style="margin-top:40px">
    	<section class="flexBox w92 b-b jz">
     		<img src="mb/images/pd1.png">
     		<lable class="db c3 mgl10" for="moneyCash">昵称</lable>
     		<div class="flexBox" style="flex-grow: 2;">
     			<input id="divusername" type="text" name="" placeholder="<%=user.username%>" class="db"/>
     			<button onclick="javascript:changeName('<%=user.username%>');" type="button"  class="btnOrange f14 cf db mgl10" style="width:21%;line-height:32px;">修改</button>
     		</div>
     	</section>
     	
     	<section class="flexBox w92 b-b jz">
     		<img src="mb/images/pd2.png">
     		<lable class="db c3 mgl10" for="moneyCash">手机号码</lable>
     		<input type="text" name="" placeholder="<%=user.mobile%>" class="db tr"/>
     	</section>
     	
     	
     	<!-- 可借用商品是否显示 -->
     	
   <%--   	<%if(user.isvruser != null){%>
     		<%if(flagTest==0) {%> 
     			<section class="flexBox w92 b-b jz">
		     		<img src="mb/images/pd3.png">
		     		<lable class="db c3 mgl10" for="moneyCash">可借用商品</lable>
		     		<div class="flexBox" style="flex-grow: 2;">
		     			<div></div>
		     			<span class="db orange2"><%=user.tempnum%></span>
		     		</div>
		     	</section>
            <%} %>
     	<%} %> --%>
     	
     	<section onclick="turnPage();"  class="flexBox w92 b-b jz">
		     		<img src="mb/images/pd4.png">
		     		<lable class="db c3 mgl10" for="moneyCash">我的销售团队</lable>
		     		<div class="flexBox" style="flex-grow: 2;">
		     			<div></div>
		     			<img src="mb/images/img10.png" alt="" class="db wauto rotate-90" style="height:12px;align-self:end;">
		     		</div>
		 </section>
      
    </section>
    
    <%--<section class="w100 of">--%>
        <%--<button type="button" class="exitButton f18 cf tc db jz">退出登陆</button>--%>
    <%--</section>--%>
    
    <%--<section class="w100 of lh2 mgt15">可借用商品:<%=user.tempum%></section>--%>
</div><!--container-->
<div class="theme-popover-mask"></div>
<section id="photoclip" class="photoclip pa of bcf">
    <div class="detailTop w100 of">
        <div class="w100 of tc c3 f18">
            更换头像
        </div>
    </div>
    <div class="container jz w100 of">
        <div class="w100 of jz">
            <section id="touxiangClip" class="touxiangClip w100 bcf of">
                <div id="clipArea"></div>
                <div class="w100 of clearfix" style="width: 80%;margin: 9px auto;">
                    <button type="button" id="fileFake" class="choosePic fl" onclick="choosePic();">选择图片</button>
                    <input type="file" id="file">
                    <input type="hidden" id="newAvater" name="newAvater">
                    <button type="button" id="clipBtn" class="choosePic fr" style="background:#ccccff;">截取提交</button>
                </div>
                <div id="view"></div>
                <P class="w100 tc c6 f12 mgt10">截图预览</P>
                <div class="jz of mgb32 mgt10" style="width: 90%">
                    <button type="button" id="clipCancel" class="cf jz db fl" onclick="clipHide();">取消</button>
                    <button type="button" id="clipOk" class="cf jz db fr" onclick="clipOkBnt();">确定</button>
                </div>
            </section>

            <style>
                #clipArea {
                    margin: 3% 8%;
                    height: 200px;
                }

                #file {
                    display: none;
                }

                #view {
                    margin: 0 auto;
                    width: 110px;
                    height: 110px;
                }

                #clipCancel, #clipOk {
                    width: 45%;
                    display: block;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 3px;
                }

                #clipCancel {
                    background: #ccc;
                }

                #clipOk {
                    background: #0066ff;
                }
            </style>
        </div>
    </div>
</section>

<!--changePicDiv-->
<section id="modifyMoblieIframeDiv" class="loginIframeDiv w100 h100 pf">
    <div class="registIframe jz bcf" style="height: 459px;margin-top: 17%">
        <iframe class="w100 h100 of" src="mb/jsp/modifyMoblie.jsp" frameborder="0" scrolling="no" vsspace="0" hspace="0"
                marginwidth="0" marginheight="0">

        </iframe>
    </div>
</section>
<!--modifyMoblieIframeDiv-->
<section id="modifyNameIframeDiv" class="loginIframeDiv w100 h100 pf">
    <div class="registIframe jz bcf" style="height: 358px;margin-top: 27%">
        <iframe class="w100 h100 of" src="mb/jsp/modifyName.jsp" frameborder="0" scrolling="no" vsspace="0" hspace="0"
                marginwidth="0" marginheight="0">

        </iframe>
    </div>
</section>
<!--modifyMoblieIframeDiv-->

<script>
	
	function turnPage(){
		console.log("aa");
		window.location.href=  "mb/jsp/teamList.jsp?keywordVal="+encodeURIComponent(encodeURIComponent('<%=user.username%>'));
	}

    function clipHide() {
        $(".theme-popover-mask").fadeOut();
        $("#photoclip").slideUp();
    }

    $(function () {
        $("#ghtouxiang").bind("click", function () {
            $(".theme-popover-mask").fadeIn();
            $("#photoclip").fadeIn();
        })
    });

    function choosePic() {
        $("#file").trigger("click");
    }
    
    
    
       // 修改昵称
	function changeName(nameOdd) {
		var nameNew = $.trim($("#divusername").val());
		if(nameNew ==""){
			showToast("未填写新昵称");
		}else if(nameNew == nameOdd){
			showToast("出错，新昵称和原来的昵称一致");
		}else{
			$.ajax({
	            url: "PlugServlet",
	            data: JSON.stringify({m: 114,name:nameNew}),
	            type: 'post',
	            dataType: 'json',
	            contentType: "application/json;charset=utf-8",
	            beforeSend: function () {
	
	            },
	            success: function (data) {
	 				console.log(data);
	               if (data.state == 1) {
	                  // 成功弹出提示
	                  showToast(data.info);
	                  setTimeout('window.location.reload()', 1600);
	                } else {
	                    // 其他错误弹出提示
	                   showToast(data.info);
	                }
	            },
	            error: function (data) {
	                showToast(data.info);
	            },
	            complete: function () {
	                closeProgressDg();
	            }
	        });
		}
        
    } 
    
    

    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [150, 150],
        outputSize: [150, 150],
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        loadStart: function () {
            console.log("照片读取中");
        },
        loadComplete: function () {
            console.log("照片读取完成");
        },
        clipFinish: function (dataURL) {
            console.log(dataURL);
            convertToFile(dataURL);
        }
    });

    //图片上传
    function convertToFile(base64Codes) {//将base64转化blob，并放到form中

        var formData = new FormData();

        //formData.append('file', convertBase64UrlToBlob(base64Codes));

        formData.append("testimg", convertBase64UrlToBlob(base64Codes));//img是input的name属性，与后台的对应即可
        formData.append("file", convertBase64UrlToBlob(base64Codes));
        console.log(formData);

        $.ajax({ // 提交表单，异步上传图片
            url: "uploadImageBlob",
            type: "POST",
            data: formData,
            secureuri: false,
            //dataType:"json",
            processData: false,         // 告诉jQuery不要去处理发送的数据
            contentType: false,        // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                $("#newAvater").val(data);
                console.log(data);
            },
            error: function (data) {
                showToast("出错了");
                return false;
            }
        });
    }

    function convertBase64UrlToBlob(urlData) {
        var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], {type: 'image/png'});
    }

    function clipOkBnt() {

        var newAvater = $.trim($('#newAvater').val());
        if (newAvater == "") {
            showToast("没有选择图片");
            return false;
        }

        $.ajax({ // 提交表单，异步上传图片
            url: "PlugServlet ",
            data: JSON.stringify({m: 115, avatar: newAvater}),
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data['state'] == 1) {
                    showToast(data.info);
                    clipArea.destroy();

                    $(".theme-popover-mask").fadeOut();
                    $("#photoclip").slideUp();

                    // 设置个人信息图片
                    $("#userimg").attr("src", getBaseImgUrl(newAvater));
                    // 存储需要刷新用户页面
                    localStorage.setItem("needrefreshpersonalall", 'true');
                }
                else {
                    showToast(data.info);
                }

            },
            error: function (data) {
                showToast("出错了");
                return false;
            }
        });


    }

</script>

</body>
</html>
